<template>
    <div class="baoming-form">
        <div class="form-title">
            <p class="title">填写信息</p>
        </div>
        <div class="form-main">
            <div class="form-cells">
                <div class="form-cell clearfix">
                    <div class="form-cell__hd">
                        <label class="form-label"><i>*</i>姓名</label>
                    </div>
                    <div class="form-cell__bd">
                        <input class="form-input" name="name" type="text" placeholder="您的真实姓名">
                    </div>
                </div>
                <div class="form-cell clearfix">
                    <div class="form-cell__hd">
                        <label class="form-label"><i>*</i>手机号</label>
                    </div>
                    <div class="form-cell__bd">
                        <input class="form-input" name="tel" type="number" pattern="[0-9]*" max="11" placeholder="您的手机号">
                    </div>
                </div>
                <div class="form-cell clearfix">
                    <div class="form-cell__hd">
                        <label class="form-label"><i>*</i>性别</label>
                    </div>
                    <div class="form-cell__bd">
                        <div class="form-cell__radio">
                            <label for="male">男</label>
                            <input type="radio" class="form-radio" name="sex" id="male" value="0" /> 
                        </div>
                        <div class="form-cell__radio">
                            <label for="1">女</label>
                            <input type="radio" class="form-radio" name="sex" id="female" value="1" />
                        </div>
                    </div>
                </div>
                <div class="form-cell clearfix">
                    <div class="form-cell__hd">
                        <label class="form-label"><i>*</i>社区</label>
                    </div>
                    <div class="form-cell__bd">
                        <input class="form-select" name="community" id="community" type="text" value="" placeholder="请选择社区" readonly>
                    </div>
                </div>
                <div class="form-cell clearfix">
                    <div class="form-cell__hd">
                        <label class="form-label">具体地址</label>
                    </div>
                    <div class="form-cell__td">
                        <textarea name="textarea" id="textarea" placeholder="非必填，例如：田林十四村75号"></textarea>
                    </div>
                </div>
                <div class="form-cell clearfix">
                    <div class="form-cell__hd">
                        <label class="form-label"><i>*</i>特长</label>
                    </div>
                    <div class="form-cell__bd">
                        <input class="form-select" name="specialty" id="specialty" type="text" value="" placeholder="请选择特长" readonly>
                    </div>
                </div>
            </div>
            <div class="form-btn">
                <a href="javascript:;" id="submit" class="weui-btn weui-btn_default">报 道</a>
            </div>
        </div>
    </div>
</template>


<style scoped>
.baoming-form{
    width: 100%;
}
.form-title{
    padding: 10px;
    border-bottom: 1px solid #f6f6f6;
}
.form-title .title{
    margin-left: 10px;
    font-size: 16px;
    color: #d2404c;
}
.form-main{
    margin-top: 10px;
    padding: 0 20px;
}
.form-cells{

}
.form-cell{
    padding: 10px 0;
}
.form-cell .form-cell__hd{
    width: 20%;
    float: left;
}
.form-cell .form-cell__bd{
    margin-left: 10px;
    width: calc(80% - 10px);
    float: left;
}
.form-cell .form-cell__td{
    float: left;
    width: 100%;
}
.form-cell .form-cell__hd .form-label{
    line-height: 30px;
    color: #333;
}
.form-cell .form-cell__hd .form-label i{
    margin-right: 5px;
    color: #ff5b59;
}
.form-cell .form-cell__bd .form-input{
    padding-left: 10px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #f6f7f9;
    border: 0;
}
.form-cell .form-cell__bd .form-cell__radio{
    float: left;
    margin-right: 20px;
}
.form-cell .form-cell__bd .form-cell__radio label{
    display: inline-block;
    width: 60px;
    height: 30px;
    border: 1px solid #d4d0c8;
    border-radius: 4px;
    line-height: 24px;
    text-align: center;
}
.form-cell .form-cell__bd .form-cell__radio label.focus{
    border: 1px solid #d2404c;
}
.form-cell .form-cell__bd .form-cell__radio .form-radio{
    width: 0;
    height: 0;
}
.form-cell .form-cell__bd .form-select{
    padding-left: 10px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #f6f7f9;
    border: 0;
}
#textarea{
    padding: 10px;
    width: 100%;
    height: 80px;
    background-color: #f6f7f9;
    border: 0;
}
.form-btn{
    margin-top: 50px;
}
.form-btn .weui-btn{
    color: #fff;
    background-color: #d2404c;
}
</style>
